<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="hearder-search">
        <div class="breadcrumb-container">
          <el-input v-model="searchWord" placeholder="标题" @keyup.enter.native="searchBtn" size="small"
                    class="w-140 mr-10"></el-input>
          <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>刷新</el-button>
          <el-button size="small" type="primary" plain @click="handleEdit(0)">新增校园活动
          </el-button>
          <span class="allbook">总 {{ page.total }} 条数据</span>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableoption.tableStripe"
              :border="tableoption.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c"
              @selection-change="handleSelectionChange">
            <!--            <el-table-column-->
            <!--                type="selection"-->
            <!--                width="60">-->
            <!--            </el-table-column>-->
            <!--            <el-table-column-->
            <!--                prop="id"-->
            <!--                label="ID"-->
            <!--                width="80">-->
            <!--            </el-table-column>-->
            <el-table-column
                prop="title"
                label="活动名称">
            </el-table-column>
            <el-table-column
              prop="title"
              label="需报名参加" width="90">
              <template slot-scope="scope">
                {{scope.row.is_apply?'需报名':'无需报名'}}
              </template>
            </el-table-column>
            <el-table-column
                label="活动时间"
                width="190">
              <template slot-scope="scope">
                {{ scope.row.start_time }}至{{ scope.row.end_time }}
                <!--                <div class="timeline">至-->
                <!--                  <p>{{scope.row.start_time}}</p>-->
                <!--                  <p>至</p>-->
                <!--                  <p>{{scope.row.end_time}}</p>-->
                <!--                </div>-->
              </template>
            </el-table-column>
            <el-table-column
                label="报名人数"
                width="110">
              <template slot-scope="scope">
                <el-button v-if="scope.row.is_apply" size="small" plain @click="detailId=scope.row.id,inType=1,comeVisible=true">
                  {{ scope.row.number }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
                label="签到人数"
                width="110">
              <template slot-scope="scope">
                <el-button size="small" plain @click="detailId=scope.row.id,inType=2,comeVisible=true">
                  {{ scope.row.sign_number }}
                </el-button>
              </template>
            </el-table-column>
            <el-table-column
                prop="create_time"
                label="创建时间"
                width="160">
            </el-table-column>
            <el-table-column
                label="操作"
                width="340">
              <template slot-scope="scope">
                <el-button size="small" @click="handleBorad(scope.row.id)">活动看板</el-button>
                <el-button size="small" @click="handleQrcode(scope.row.id)" v-if="scope.row.is_apply">二维码</el-button>
                <el-button size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
                <el-button type="danger" size="small" @click="handleDetel(scope.row)" plain>删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <editDetail :visible.sync="editVisible" :detailId="detailId" @InitFn="InitFn"></editDetail>
    <dataBoard :visible.sync="boradVisible" :detailId="detailId"></dataBoard>
    <comeUser :visible.sync="comeVisible" :detailId="detailId" :inType="inType" @InitFn="InitFn"></comeUser>
    <qrcodeBox :visible.sync="qrcodeVisible" :detailId="detailId"></qrcodeBox>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import {activityIndex, activityDelete} from "@/api/admin/school"
import editDetail from "./editDetail";
import dataBoard from "./dataBorad";
import comeUser from "./comeUser";
import qrcodeBox from "./qrcodeBox";

export default {
  components: {
    editDetail,
    dataBoard,
    comeUser,
    qrcodeBox
  },
  data() {
    return {
      dialogVisible: false,
      boradVisible: false,
      comeVisible: false,
      qrcodeVisible: false,
      inType: '',
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      // 搜索
      searchWord: '',
      handleSelection: [], // checked选中框
      detailOption: null,
      editVisible: false,
      detailId: 0
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      activityIndex({p: this.page.pageindex, title: this.searchWord}).then(res => {
        if (!res.code) {
          console.log('res:', res)
          for (let item of res.list.data) {
            item.start_time = item.start_time.split(' ')[0]
            item.end_time = item.end_time.split(' ')[0]
          }
          this.arryList = res.list.data
          this.page.total = res.list.total
        }
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      console.log(val) // 所有选中值
      this.handleSelection = val
    },
    // 编辑
    handleEdit(row) {
      this.detailId = row
      this.editVisible = true
    },
    handleBorad(row) {
      this.detailId = row
      this.boradVisible = true
    },
    handleQrcode(row) {
      this.detailId = row
      this.qrcodeVisible = true
    },
    // 搜索
    searchBtn() {
      this.page.pageindex = 1
      this.InitFn()
    },
    addFood(option) {
      this.dialogType = option
      this.dialogVisible = true
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.searchWord = ''
      this.handleSelection = []
      this.InitFn()
    },
    handleDetel(row) {
      let this_ = this
      let id_ = row.id || 0
      if (row === 'all') {
        let a_ = []
        for (let item of this.handleSelection) {
          a_.push(item.id)
        }
        id_ = a_.join(',')
      }
      this.$confirm('确认删除ID【' + id_ + '】内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {
        this_.deletFn(id_)
      }).catch(() => {
      })
    },
    deletFn(id) {
      activityDelete({id: id}).then(res => {
        if (!res.code) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.InitFn()
        }
      })
    }
  },
  mounted() {
  }
}
</script>
<style>
.timeline {
  display: flex;
  align-items: center;
}

.timeline p:nth-child(2) {
  font-size: 12px;
  height: 10px;
  line-height: 10px;
  color: #999;

}

/*.timeline:hover{*/
/*  text-decoration: underline;*/
/*  color: #006dcd;*/

/*}*/
</style>
